<template>
	<view class="container">
		<navbar :textTitle="textTitle" :isHome="true" @changeTitle="handleTitle" />
		<!-- 公告栏 -->
		<view class="weui-cell" v-if="noticeVisible">
			<view class="weui-cell_hd">
				<image src="../../static/images/ic_myapp.png" mode="widthFix"></image>
			</view>
			<view class="weui-cell_bd">
				<text style="color: #be9719;font-size: 24rpx;">点击右上角"添加到我的小程序"，方便下次找到！</text>
			</view>
			<view class="weui-cell_ft" @click="noticeVisible=false">
				<image src="../../static/images/modal_closer.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="main">
			<!-- banner轮播 -->
			<view class="" v-if="sliders&& sliders.length>0">
				<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="5000" duration="500">
					<swiper-item style="width: 100%;" v-for="item  in  sliders" :key="item.id">
						<image style="width: 100%;" :src="item.pic_image_url" mode="widthFix" show-menu-by-longpress
							data-index="item.id"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- nav2 -->
			<view class="nav2" v-if="nav2 &&  nav2.length">
				<view class="nav2-item" v-for="(item,index) in nav2" :key="item.id" :data-index="index"
					@click="handleNav2Tap">
					<image :src="item.pic_image_url" mode="widthFix"></image>
				</view>
			</view>
			<!-- navs -->
			<view class="navs" v-if="navs &&  navs.length">
				<view class="navs-item" v-for="(item,index) in navs" :key="item.id" :data-index="index"
					@click="handleNavsTap">
					<image :src="item.pic_image_url" mode="widthFix"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<!-- hospital -->
			<view class="hosp-list">
				<view class="list-item" v-for="(item,index) in hospitals" :data-index="index" :data-hid="item.id"
					:key="item.id" @click="handlehHospital">
					<image :src="item.avatar_url?item.avatar_url:'../../static/images/avatar.jpg'" mode="aspectFill">
					</image>
					<view class="text">
						<text class="title">{{item.name}}</text>
						<text class="title1">{{item.rank}}&nbsp;&nbsp;{{item.label}}</text>
						<p class="p">{{item.intro}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		defineComponent,
		ref,
		toRaw
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const handleTitle = (value) => {
		title.value = value
	}
	const textTitle = ref('首页')
	// 公告栏
	const noticeVisible = ref(true)
	const app = getApp()
	// 轮播数据
	const sliders = ref([])
	// nav2数据
	const nav2 = ref([])
	// nav5数据
	const navs = ref([])
	// 医院列表
	const hospitals = ref([])
	onLoad(() => {
		app.globalData.utils.getUserinfo()
		// 获取banner
		app.globalData.utils.request({
			url: '/app/init',
			success: (res) => {
				const {
					id
				} = res.data.area
				app.globalData.utils.request({
					url: '/Index/index',
					data: {
						aid: id
					},
					success: ({
						data
					}) => {
						sliders.value = data.slides
						nav2.value = data.nav2s
						navs.value = data.navs
						hospitals.value = data.hospitals
					}
				})
			}
		})
	})
	// 内部页面跳转
	// 相同逻辑做封装
	const jump = (nav) => {
		if (nav.stype === '1') {
			uni.navigateTo({
				url: nav.stype_link
			})
		}
	}
	// nav2跳转
	const handleNav2Tap = (e) => {
		console.log(e)
		const nav = toRaw(nav2.value)[e.currentTarget.dataset.index]
		console.log(nav, '123')
		// 判断是否为内部链接
		jump(nav)
	}
	// navs跳转
	const handleNavsTap = (e) => {
		console.log(e)
		const nav = toRaw(navs.value)[e.currentTarget.dataset.index]
		console.log(nav, '123')
		// 判断是否为内部链接
		jump(nav)
	}
	// 医院跳转
	const handlehHospital = (e) => {
		console.log(e.currentTarget.dataset.hid)
		uni.navigateTo({
			url: '../hospital/index?hid=' + e.currentTarget.dataset.hid
		})
	}
</script>

<style lang="scss">
	image {
		vertical-align: middle;
	}

	page {
		background-color: #fff;
		margin-top: 130rpx;
	}

	.container {

		.weui-cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 14rpx;
			height: 80rpx;
			background-color: #fff9eb;
			font-size: 32rpx;

			image {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}

			.weui-cell_hd {}
		}

		.main {
			padding: 0 25rpx;

			.swiper {
				border-radius: 15rpx;
				margin: 15rpx 0 0;
				overflow: hidden;
			}

			.nav2,
			.navs {
				margin: 15rpx 0 0;
				display: flex;
				gap: 15rpx;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;

				.nav2-item {
					width: 50%;

					image {
						width: 100%;
					}
				}

				.navs-item {
					width: 17%;
					text-align: center;
					font-size: 28rpx;
					font-weight: 700;

					image {
						width: 100%;
					}
				}
			}

			.hosp-list {
				.list-item {
					margin-bottom: 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 15rpx;
					padding: 15rpx 15rpx 5rpx;
					box-shadow: 0 10rpx 12rpx rgba(0, 0, 0, 0.1);
					border-radius: 15rpx;


					image {
						vertical-align: bottom;
						width: 25%;
						height: 170rpx;
						// height: 100%;
						border-radius: 15rpx;
					}

					.text {
						flex: 1;
						color: #000;
						display: flex;
						flex-direction: column;

						.title {
							font-weight: 700;
							font-size: 32rpx;
						}

						.title1 {
							font-size: 28rpx;
							font-weight: 700;
							color: green;
						}

						.p {
							font-size: 28rpx;
							color: #aaa;
							text-overflow: -o-ellipsis-lastline;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}
</style>